<template>
	<div class="dashboard">
		<div class="content">
			<div class="top-container">
				<div class="nav-container">
					<div @click="handleNavBtnClick('/pc-page1')" class="nav-btn-item">综合统计</div>
					<div class="nav-btn-item" @click="handleNavBtnClick('/pc-page2')">运营情况</div>
					<div class="nav-btn-item nav-btn-active">工程情况</div>
				</div>
				<div class="logo-container">
					<img class="logo-img" src="./images/logoText.png" alt="logo" />
				</div>
				<div class="time-container">
					<div class="time-icon-wrapper">
						<img class="time-icon-img" src="./images/time.png" alt="time" />
					</div>
					<div class="time-display-text">11:15</div>
					<div class="date-info-wrapper">
						<div class="date-text">2021年04月25日</div>
						<div class="week-text">星期四</div>
					</div>
				</div>
			</div>
			<div class="content-top">
				<div class="content-top-left">
					<pcPage3ItemBox1 ref="itemBox1" :chartData="pageData1" />
					<pcPage3ItemBox2 ref="itemBox2" :chartData="pageData2" />
				</div>
				<div class="echart-box-center">
					<div class="command-center-wrapper">
						<div class="command-center-stats">
							<div class="stat-item" v-for="(item, index) in summaryData" :key="index">
								<div class="stat-value">{{ item.value }}<span class="stat-unit">{{ item.unit }}</span></div>
								<div class="stat-label">{{ item.label }}</div>
							</div>
						</div>
					</div>

					<div class="page1-centet-wrapper">
						<pcPage3Centet ref="page1Centet" :companiesData="companiesData" />
					</div>
				</div>
				<div class="content-top-right">
					<pcPage3ItemBox3 ref="itemBox3" :chartData="pageData3" />
					<pcPage3ItemBox4 ref="itemBox4" :chartData="pageData4" />
				</div>
			</div>
			<div class="content-bottom">
				<pcPage3ItemBox5 ref="itemBox5" :chartData="pageData5" />
				<pcPage3ItemBox6 ref="itemBox6" :chartData="pageData6" />
				<pcPage3ItemBox7 ref="itemBox7" :chartData="pageData7" />
				<pcPage3ItemBox8 ref="itemBox8" :chartData="pageData8" />
			</div>
		</div>
	</div>
</template>

<script>
import pcPage3ItemBox1 from "./components/pc-page3/pc-page3-item-box-1.vue";
import pcPage3ItemBox2 from "./components/pc-page3/pc-page3-item-box-2.vue";
import pcPage3ItemBox3 from "./components/pc-page3/pc-page3-item-box-3.vue";
import pcPage3ItemBox4 from "./components/pc-page3/pc-page3-item-box-4.vue";
import pcPage3Centet from "./components/pc-page3/pc-page3-centet.vue";
import pcPage3ItemBox5 from "./components/pc-page3/pc-page3-item-box-5.vue";
import pcPage3ItemBox6 from "./components/pc-page3/pc-page3-item-box-6.vue";
import pcPage3ItemBox7 from "./components/pc-page3/pc-page3-item-box-7.vue";
import pcPage3ItemBox8 from "./components/pc-page3/pc-page3-item-box-8.vue";
export default {
	components: { pcPage3ItemBox1, pcPage3ItemBox2, pcPage3ItemBox3, pcPage3ItemBox4, pcPage3Centet, pcPage3ItemBox5, pcPage3ItemBox6, pcPage3ItemBox7, pcPage3ItemBox8 },
	data() {
		return {
			pageData1: [ { name: "数据一", value: 200 }, { name: "数据二", value: 120 }, { name: "数据三", value: 80 }, { name: "数据四", value: 160 }, { name: "数据五", value: 100 }, { name: "数据六", value: 60 }, { name: "数据七", value: 40 }, { name: "数据八", value: 240 } ],
			pageData2: [ { name: "1日", value: 650 }, { name: "2日", value: 280 }, { name: "3日", value: 450 }, { name: "4日", value: 680 }, { name: "5日", value: 200 }, { name: "6日", value: 320 }, { name: "7日", value: 880 }, { name: "8日", value: 480 }, { name: "9日", value: 210 }, { name: "10日", value: 420 }, { name: "11日", value: 190 }, { name: "12日", value: 420 } ],
			pageData3: [ { name: "1月", value: 700 }, { name: "2月", value: 500 }, { name: "3月", value: 520 }, { name: "4月", value: 650 }, { name: "5月", value: 480 }, { name: "6月", value: 620 } ],
			pageData4: [ { name: "1月", value: 320 }, { name: "2月", value: 180 }, { name: "3月", value: 250 }, { name: "4月", value: 410 }, { name: "5月", value: 160 }, { name: "6月", value: 380 } ],
			pageData5: [ { name: "2016", value: 2800 }, { name: "2017", value: 3200 }, { name: "2018", value: 3100 }, { name: "2019", value: 3400 }, { name: "2020", value: 3800 } ],
			pageData6: [ { name: "周一", value: 2050 }, { name: "周二", value: 2700 }, { name: "周三", value: 2200 }, { name: "周四", value: 1850 }, { name: "周五", value: 1650 }, { name: "周六", value: 1350 }, { name: "周日", value: 1300 } ],
			pageData7: { categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"], series1: { name: "标签1", data: [430, 350, 500, 420, 600, 780, 850, 400, 480, 720, 460, 520] }, series2: { name: "标签2", data: [380, 290, 450, 380, 550, 720, 780, 350, 430, 660, 400, 460] } },
			pageData8: [ { name: "工业区", value: 41, color: "#0e4a92" }, { name: "商业区", value: 32, color: "#1e63b5" }, { name: "公共区", value: 41, color: "#3c7fd8" }, { name: "科技区", value: 15, color: "#5ba1fb" }, { name: "教育区", value: 39, color: "#7bc4fd" }, { name: "其他区", value: 2, color: "#a4ddff" } ],
			summaryData: [ { value: "1268", unit: "km", label: "管网长度" }, { value: "368", unit: "个", label: "调压设施" }, { value: "6947", unit: "万/m³", label: "年销气总量" }, { value: "286", unit: "个", label: "场站数量" }, { value: "692", unit: "户", label: "用户数量" } ],
			companiesData: [ { name: '长春市燃气', coord: [497, 498], isCenter: true, pipelineLength: 1580.5, regulatingFacilities: 156, annualGasSales: 28.6, stationCount: 12, userCount: 158000 }, { name: '德惠公司', coord: [630, 564], pipelineLength: 456.8, regulatingFacilities: 45, annualGasSales: 8.9, stationCount: 5, userCount: 42000 }, { name: '双阳公司', coord: [531, 438], pipelineLength: 389.2, regulatingFacilities: 38, annualGasSales: 7.2, stationCount: 4, userCount: 35000 }, { name: '公主岭公司', coord: [371, 418], pipelineLength: 523.6, regulatingFacilities: 52, annualGasSales: 10.5, stationCount: 6, userCount: 48000 }, { name: '长白山分公司', coord: [730, 199], pipelineLength: 234.5, regulatingFacilities: 28, annualGasSales: 4.8, stationCount: 3, userCount: 22000 }, { name: '龙井分公司', coord: [1028, 299], pipelineLength: 187.3, regulatingFacilities: 22, annualGasSales: 3.6, stationCount: 2, userCount: 18000 }, { name: '图们分公司', coord: [1049, 332], pipelineLength: 198.7, regulatingFacilities: 24, annualGasSales: 4.1, stationCount: 3, userCount: 19500 }, { name: '延边分公司', coord: [995, 352], pipelineLength: 312.4, regulatingFacilities: 35, annualGasSales: 6.8, stationCount: 4, userCount: 31000 }, { name: '琿春分公司', coord: [1128, 385], pipelineLength: 156.9, regulatingFacilities: 18, annualGasSales: 2.9, stationCount: 2, userCount: 15000 } ]
		};
	},
	mounted() { this.pageinit(); },
	methods: { pageinit() { this.$nextTick(() => { this.$refs.itemBox1.initChart(); this.$refs.itemBox2.initChart(); this.$refs.itemBox3.initChart(); this.$refs.itemBox4.initChart(); this.$refs.itemBox5.initChart(); this.$refs.itemBox6.initChart(); this.$refs.itemBox7.initChart(); this.$refs.itemBox8.initChart(); this.$refs.page1Centet.initChart(); }); }, handleNavBtnClick(path) { this.$router.push(path); } },
};
</script>

<style scoped lang="scss">
$dashboard-width: 2704px; $dashboard-height: 1560px; $primary-color: #fff; $secondary-color: rgba(255,255,255,0.8); $tertiary-color: rgba(255,255,255,0.6);
.dashboard { width: $dashboard-width; height: $dashboard-height; overflow: hidden; position: relative; box-sizing: border-box; background: { image: url("./images/bg02.jpg"); size: 100% 100%; repeat: no-repeat; position: center center; } }
.content { width: 100%; height: 100%; overflow: hidden; position: relative; box-sizing: border-box; background: { image: url("./images/top.png"); size: 100% 80%; repeat: no-repeat; position: center top; } }
.top-container { width: 100%; height: 107px; display: flex; justify-content: space-between; align-items: center; position: relative; }
.nav-container { margin-left: 58px; display: flex; gap: 19px; }
.nav-btn-item { width: 193px; height: 76px; background: { image: url("./images/navBtnNormal.png"); size: 100% 100%; repeat: no-repeat; } display: flex; align-items: center; justify-content: center; font-size: 20px; color: $primary-color; cursor: pointer; }
.nav-btn-active { background-image: url("./images/navBtn.png"); }
.logo-container { position: absolute; left: calc(50% + 32px); transform: translateX(-50%); top: 31px; .logo-img { height: 62px; } }
.time-container { display: flex; align-items: center; gap: 23px; margin-right: 58px; .time-icon-img { width: 62px; height: 62px; } .time-display-text { font-size: 50px; color: $primary-color; font-weight: bold; margin-right: 23px; } .date-info-wrapper { display: flex; flex-direction: column; gap: 5px; .date-text { font-size: 20px; color: $secondary-color; } .week-text { font-size: 19px; color: $tertiary-color; } } }
.content-top { display: flex; justify-content: space-between; width: 100%; .content-top-left { flex-flow: column; width: 676px; margin-left: 63px; > div { margin-bottom: 59px; } } .content-top-right { flex-flow: column; width: 676px; margin-right: 63px; > div { margin-bottom: 59px; } } .echart-box-center { flex: 1; width: 1894px; display: flex; flex-direction: column; align-items: center; margin: 85px 29px 0; } .command-center-wrapper { width: 1256px; display: flex; flex-direction: column; align-items: center; margin-bottom: 25px; .command-center-stats { display: flex; justify-content: space-around; width: 100%; margin-top: 17px; } .stat-item { display: flex; flex-direction: column; align-items: center; margin: 0 14px; } .stat-value { font-size: 46px; font-weight: bold; margin-bottom: 10px; } .stat-item:nth-child(1) .stat-value { color: #f5e17a; } .stat-item:nth-child(2) .stat-value { color: #3cffb3; } .stat-item:nth-child(3) .stat-value { color: #6ad4ff; } .stat-item:nth-child(4) .stat-value { color: #a2c4ff; } .stat-item:nth-child(5) .stat-value { color: #ffb88c; } .stat-unit { font-size: 20px; margin-left: 5px; } .stat-label { font-size: 20px; color: #fff; } } .page1-centet-wrapper { display: block; width: 1256px; height: 617px; } }
.content-bottom { display: flex; justify-content: space-between; width: calc(100% - 126px); padding: 0 63px; }
</style>
